<template>
    <mian-layout>
        <el-descriptions labelClassName="mysdItemLable" title="AR地标详情" :column="2" border>
            <el-descriptions-item label="AR头图" :span="2">
                <div class="imgItemBox">
                    <img :src="oDetail.headImageUrl">
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="地标名称" :span="2">{{oDetail.name}}</el-descriptions-item>
            <el-descriptions-item label="地标副标题" :span="2">{{oDetail.subtitle}}</el-descriptions-item>
            <el-descriptions-item label="地标定位地址">{{oDetail.locationAddress}}</el-descriptions-item>
            <el-descriptions-item label="地标区域关联">{{oDetail.provinceName}} {{oDetail.cityName}} {{oDetail.districtName}}</el-descriptions-item>
            <el-descriptions-item label="经度">{{oDetail.locationLongitude}}</el-descriptions-item>
            <el-descriptions-item label="维度">{{oDetail.locationLatitude}}</el-descriptions-item>
            <el-descriptions-item label="关联U3D城市地标">{{sceneNames.join(',')}}</el-descriptions-item>
            <el-descriptions-item label="商业面积">{{oDetail.commercialArea}}</el-descriptions-item>
            <el-descriptions-item label="覆盖人群">{{oDetail.coveragePopulation}}</el-descriptions-item>
            <el-descriptions-item label="预估人流量">{{oDetail.visitorsFlowrate}}</el-descriptions-item>
            <el-descriptions-item label="经济体量" :span="2">{{oDetail.economicVolume}}</el-descriptions-item>
            <el-descriptions-item label="AR视频" :span="2" v-if="oDetail.videoUrl">
                <video class="myvideo" style="width:500px;height:200px" ref="videoEle" controls>
                    <source :src="oDetail.videoUrl" type="video/mp4">
                    您的浏览器不支持Video标签。
                </video>
            </el-descriptions-item>
            <el-descriptions-item label="AR地标其他图片" :span="2" v-if="oDetail.arLandmarkFileDtos">
                <div class="imgList" v-for="dt in oDetail.arLandmarkFileDtos" :key="dt.fileURl">
                    <img :src="dt.fileURl" alt=""><p>{{dt.remarks}}</p>
                </div>
            </el-descriptions-item>
        </el-descriptions>
        <br/>

        <div style="text-align: center;">
            <my-back type="info" :reGetDataFlag="true">返回</my-back>
            <el-button type="success" plain icon="el-icon-edit" @click="goDetail">修改</el-button>
        </div>
    </mian-layout>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myBack from '@/components/public/myBack.vue'
import {
  get_Landmark_details,
  getArSceneList
} from '@/api/arApi'
export default {
    components:{
      myTable,
      myBack
    },
    data(){
        return{
            arLandmarkId:'',
            oDetail:{},
            sceneNames:[]
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        this.arLandmarkId = this.$route.params.id
        this.getData()
    },
    methods:{
        async getData(){ 
            const res = await get_Landmark_details(this.arLandmarkId)
            if(res.success){
                this.oDetail = res.data
                getArSceneList({u3dMapId:res.data.u3dMapId})  // 获取u3d场景数据
                .then(res =>{
                    res.data.forEach(item => {
                        this.sceneNames.push(item.sceneName)
                    });
                })
            }
        },
        goDetail(){
            sessionStorage.setItem('details',JSON.stringify(this.oDetail))
            this.$router.push(`/arlandmark/add?id=${this.oDetail.arLandmarkId}&onlyLook=2`)
        }
    }
}
</script>
<style lang="scss" scoped>
    .imgItemBox{
        display: flex;
        img{
            display: block;
            height: 100px;
            margin: 0 10px 0 0;
        }
    }
    .imgList{
        display: flex;
        padding: 0 0 10px 0;
        img{
            display: block;
            height: 70px;
        }
        p{
            display: flex;
            align-items: center; 
            padding: 0 0 0 20px;
        }
    }
</style>
<style lang="scss">
    .mysdItemLable{
        width: 150px;
    }
</style>